<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/elementUI.js"></script>
    <link rel="stylesheet" href="css/elementUI.css">
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="app">
    <div id="main1" style="height:600px;width:60%;float: left"></div>
    <div id="main2" style="height:600px;width:60%;float: left"></div>
</div>
<script>

    let vue = new Vue({
        el:"#app",
        data:{

        },
        methods:{
            initData(){
                let myChart = echarts.init(document.getElementById('main1'));
                axios.get("/goods/zhu").then(res=>{
                    let x = res.data.x;
                    let y = res.data.y;
                    let option = {
                        xAxis: {
                            type: 'category',
                            data: x
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: y,
                                type: 'bar'
                            }
                        ]
                    };
                    myChart.setOption(option);
                })

            },
            initBing(){
                let myChart = echarts.init(document.getElementById('main2'));
                let option;
                axios.get("/goods/bing").then(res=>{
                    option = {
                        title: {
                            text: '每人申请数量',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '每人申请数量',
                                type: 'pie',
                                radius: '50%',
                                data: res.data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                })

            }
        },
        // created Vue对象创建之后调用
        // mounted 页面渲染之后调用
        mounted(){
            this.initData();
            this.initBing();
        }
    })
</script>
</body>
</html>